<template>
	<view class="view">
		<uni-nav-bar title="同病互助" fixed statusBar>
			<view slot="left" style="display: flex;align-items: center;">
				<image class="icon" src="/static/images/ic_black_back.png" mode="aspectFit" @click.prevent="back()">
				</image>
				<image class="icon" src="/static/images/ic_search_black.png" mode="aspectFit"
					@click.prevent="to('/pages/community/search')">
				</image>
			</view>
		</uni-nav-bar>

		<div style="position: sticky;border-bottom: 1rpx solid #F1F1F1;">
			<v-tabs :scroll="false" @change="changeTab" v-model="current" :tabs="tabs" activeColor="#000000" :lineScale="0.2"
				padding="0rpx" height="80rpx" line-height="6rpx" lineColor="#32C59A" currentColor="#00000"></v-tabs>
		</div>

		<swiper easing-function="linear" :current="current" :style="{ height: '100%' }" @change="swiperChange">
			<swiper-item v-for="(item, index) in tabs" :key="index">
				<scroll-view scroll-y style="height: 100%;" @scrolltolower="scrolltolower">
					<community-item :current="current" :postList="postList" :careDiseaseList="careDiseaseList"
						:diseaseList="diseaseList" :myPostList="myPostList" @to="to" @changeStatus="changeStatus"></community-item>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import communityList from '@/components/communityList.vue';
	import CommunityItem from './CommunityItem.vue';
	import {
		getListByUserId,
		getListByPopular,
		getpostList,
		getCarePostList
	} from '@/apis/request.js';

	export default {
		components: {
			communityList,
			CommunityItem
		},
		data() {
			return {
				current: 0,
				StatusBar: this.StatusBar,
				StatusWidth: this.StatusWidth,
				tabs: ['关注', '全部', '互助', '悬赏', '我的'],
				userId: null,
				postList: [],
				myPostList: [],
				diseaseList: [],
				careDiseaseList: [],
				allPage: 1,
				carePage: 1,
				total: 0
			};
		},
		computed: {
			TabsTop() {
				return '80rpx';
			}
		},
		onShow() {
			this.userId = wx.getStorageSync('userInfo').id;
			if (!this.userId && this.current == 0) {
				this.current = 1;
				this.init();
			}
		},
		onLoad(options) {
			this.userId = wx.getStorageSync('userInfo').id;
			this.init();
			// 接受发布成功的回调
			uni.$on('sendOk', () => {
				this.refresh();
			});
			uni.$on('change', () => {
				this.refresh();
			});
		},
		onUnload() {
			uni.$off('sendOk');
		},
		methods: {
			refresh() {
				this.allPage = 1;
				this.carePage = 1;
				this.init();
			},
			loadMore() {
				if (this.current === 0) {
					this.getCarePostList();
				} else {
					this.getPostList();
				}
			},
			init() {
				if (this.current == 0) {
					this.getMyDiseaseList();
					this.getCarePostList();
				} else {
					this.getHotDiseaseList();
					this.getPostList();
				}
			},
			//滚动到底部
			scrolltolower() {
				this.loadMore();
			},
			changeTab(e) {
				this.current = e;
			},
			swiperChange(e) {
				this.current = e.detail.current;
				this.refresh();
			},
			// 请求热门圈子列表
			async getHotDiseaseList() {
				let list = await getListByPopular({});
				this.diseaseList = list.slice(0, 9);
			},
			// 请求我关注的圈子列表
			async getMyDiseaseList() {
				if (!this.userId) {
					return;
				}
				let list = await getListByUserId({
					userId: this.userId
				});
				this.careDiseaseList = list.slice(0, 9);
			},
			// 全部帖子列表
			async getPostList() {
				let params = {
					pageNo: this.allPage++,
					pageSize: 10,
					isAllOrMy: 1,
					status: this.current == 1 ? 0 : this.current == 2 ? 2 : 5
				};
				if (this.current == 3) {
					params.helpStatus = 0;
				}
				let data = await getpostList(params);
				this.total = data.total;
				if (data.current === 1) this.postList = [];
				this.postList = this.postList.concat(data.records);
				for (let i = 0; i < this.postList.length; i++) {
					this.postList[i].imgs = [];
					this.$set(this.postList[i], 'showImage', false);
					if (this.postList[i].imageUrl) {
						if (this.postList[i].imageUrl.indexOf(',') != -1) {
							this.postList[i].imgs = this.postList[i].imageUrl.split(',');
						} else {
							this.postList[i].imgs.push(this.postList[i].imageUrl);
						}
					} else {
						this.postList[i].imgs = [];
					}
				}
				uni.stopPullDownRefresh();
			},
			// 关注帖子列表
			async getCarePostList() {
				if (!this.userId) {
					return;
				}
				let params = {
					pageNo: this.carePage++,
					pageSize: 10
				};
				let data = await getCarePostList(params);
				this.total = data.total;
				if (data.current === 1) this.myPostList = [];
				this.myPostList = this.myPostList.concat(data.records);
				for (let i = 0; i < this.myPostList.length; i++) {
					this.myPostList[i].imgs = [];
					this.$set(this.myPostList[i], 'showImage', false);
					if (this.myPostList[i].imageUrl) {
						if (this.myPostList[i].imageUrl.indexOf(',') != -1) {
							this.myPostList[i].imgs = this.myPostList[i].imageUrl.split(',');
						} else {
							this.myPostList[i].imgs.push(this.myPostList[i].imageUrl);
						}
					} else {
						this.myPostList[i].imgs = [];
					}
				}
			},
			// 展示大图
			preview(current, imgList) {
				this.$Imgpreview(current, imgList);
			},
			// 路由 跳转子页面
			to(url) {
				uni.navigateTo({
					url
				});
			},
			back() {
				uni.navigateBack();
			},
			changeStatus(index) {
				if (this.current == 0) {
					this.myPostList[index].showImage = !this.myPostList[index].showImage;
				} else {
					this.postList[index].showImage = !this.postList[index].showImage;
				}
			}
		}
	};
</script>

<style lang="less" scoped>
	.view {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.icon {
			padding: 10rpx;
			width: 38rpx;
			height: 38rpx;
		}

		.nav-bar {
			position: fixed;
			width: 100vw;
			padding: 0 20rpx;
			background-color: #ffffff;
			top: 0;
			left: 0;
			z-index: 1;
			height: 100rpx;

			.nav-bar-item {
				position: relative;
				justify-content: space-between;
				display: flex;
				align-items: center;
				height: 100%;

				.title {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}
		}
	}
</style>